<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件事件</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="app"></div>
    <script id="template1" type="plain/text">
      <div id="custom-component">
          <button on-click="click1">
              click1
          </button>
          <button on-click="click2()">
              click2
          </button>
          <button on-click="click3(user.name, user.age)">
              click3
          </button>
          <button on-click="click4($event, $keypath)">
              click4
          </button>
          <button on-click="click5(this)">
              click5
          </button>
      </div>
    </script>
    <script id="template2" type="plain/text">
      <div id="root">
          <Custom user="{{user}}" on-click1="click1" on-click2="click3" />
          {{#if open}}
            open
          {{/if}}
      </div>
    </script>
    <script src="../dist/yox.js"></script>
    <script>

        var Custom = {
            template: '#template1',
            methods: {
                click2: function (e) {
                    this.fire('click2', { name: 'component' });
                },
                click3: function (e) {
                    console.log(arguments);
                },
                click4: function (e) {
                    console.log(arguments);
                },
                click5: function (e) {
                    console.log(arguments);
                }
            }
        };

        var instance = new Yox({
            el: '#app',
            data: {
                open: false,
                user: {
                    name: 'yox',
                    age: 1
                }
            },
            template: '#template2',
            components: {
                Custom: Custom
            },
            events: {
                click1: function () {
                    console.log(this, arguments);
                },
                click3: function (e) {
                    console.log(this, arguments);
                },
                noBubble: function () {
                    console.log(this, arguments);
                }
            }
        });

    </script>
</body>
</html>
